<template>
  <div class="aci">
  <van-nav-bar
  title="订单查询"
  left-text="返回"
  left-arrow
  @click-left="router.push('/cards')"
/>
    <van-search
  v-model="value"
  show-action
  label="订单号"
  placeholder="根据订单号搜索"
>
  <template #action>
    <div @click="onClickButton">搜索</div>
  </template>
</van-search>
<van-field name="radio" label="查询支付方式">
  <template #input>
    <van-radio-group v-model="checked" direction="horizontal">
      <van-radio name="1">支付宝</van-radio>
      <van-radio name="2">微信</van-radio>
      <van-radio name="3">银联</van-radio>
    </van-radio-group>
  </template>
</van-field>
    <div>
       <h4>充值记录</h4> 
       <ul class="list-ul">
        <li v-for="item in Payment" :key="item.id">
            <p>订单编号:<span>{{item.orderNumber}}</span></p>
            <p>下单时间:<span>{{item.orderTime}}</span></p>
            <p>充值金额:<span>{{item.rechargeAmount}}</span></p>
            <p>支付方式:<span>{{item.rechargeMode}}</span></p>
        </li>
       </ul>
    </div>
  </div>
</template>

<script setup>
import { ref,onMounted,reactive,toRefs,computed,watch } from 'vue';
import { rechargeTable,getInfo } from '@/model/until'
import { useRouter } from 'vue-router'
import { userIds } from "@/stores/counter";
import userFlag from '@/hooks/unti'
userFlag()
let userInfos = userIds()
let userId = ref('')
let checked = ref(0)
const router = useRouter()
let orders = reactive({
    list:[],
    value:'',
    param:{},
})
watch(checked,()=>{
    orders.param.rechargeMode = checked.value
    search()
})
 onMounted(  ()=>{
//    await getInfo({},{Authorization:window.localStorage.getItem('token')}).then(res=>{
//         userId.value = res.data.user.userId
//         orders.param.userId = userId.value
        search()
    // })
})
const onClickButton = () => {
    orders.param.orderNumber = orders.value
    search()
    orders.value = ''
};
const search = async () => {
    // console.log('6',userInfos.userinfo);
    orders.param.userId = userInfos.userinfo.user.userId
await rechargeTable(orders.param,{Authorization:window.localStorage.getItem('token')}).then(res=>{
        orders.list = res.data.rows
        console.log(res.data.rows)
    })
}
const Payment = computed(()=>{
   return  orders.list.map(item=>{
        if(item.rechargeMode === 1){
            item.rechargeMode = '支付宝'
        }else if(item.rechargeMode === 2){
            item.rechargeMode = '微信'
        }else if(item.rechargeMode === 3){
            item.rechargeMode = '银联'
        }else{
            item.rechargeMode = ''
        }
        return item
    })
    
})
const { value } = toRefs(orders)
</script>

<style  lang="scss" scoped>
.van-nav-bar {
    margin-bottom: 10px;
}
.van-radio__label{
    margin-left: 5px!important;
}
.van-radio--horizontal{
    margin-right: 5px!important;
}
.aci{
    padding: 0 10px;
    min-height: 100vh;
    background: rgb(238, 241, 238);
    box-sizing: border-box;
}
.list-ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
   
    li{
        box-sizing: border-box;
        width: 100%;
        padding: 10px;
        background: white;
        border-radius:15px;
        margin: 10px 0;
        p{
        font-size: 14px;
        }
    }
}
h4{
    margin-top: 10px;
}
</style>